<template>
  <van-row class="footmusic">
    <van-col span="4">
      <img :src="stores.songsheets[stores.songsindex].al.picUrl" />
    </van-col>
    <van-col span="12">
      <div class="footmusic-songname">{{ stores.songsheets[stores.songsindex].name }}</div>
      <div class="footmusic-text">滑动切换歌曲</div>
    </van-col>
    <van-col span="4" @click="plays()">
      <div class="iconfont" style="font-size: 0.6rem; margin-right: 0.2rem" v-if="stores.judgeplay">&#xe679;</div>
      <div class="iconfont" style="font-size: 0.6rem; margin-right: 0.2rem" v-else>&#xe811;</div>
    </van-col>
    <van-col span="4" @click="showPopupopen()">
      <div class="iconfont" style="font-size: 0.6rem; margin-right: 0.2rem">&#xe66d;</div>
    </van-col>
  </van-row>
  <audio
    ref="audio"
    :src="`https://music.163.com/song/media/outer/url?id=${stores.songsheets[stores.songsindex].id}.mp3`"></audio>
  <!-- <SongLyric /> -->
  <van-popup v-model:show="show" position="right" :style="{ width: '100%', height: '100%' }">
    <SongLyric
      :showPopupshut="showPopupshut"
      :plays="plays"
      :playprevious="playprevious"
      :playnext="playnext"
      :playtime="playtime" />
  </van-popup>
</template>

<script>
import { useStore } from "../stores/index.js";
import { reactive, getCurrentInstance, onMounted, watch, ref } from "vue";
import SongLyric from "../components/footmusic/SongLyric.vue";
import { getlyric } from "../api/user";
export default {
  setup() {
    const stores = useStore();
    const state = reactive({
      plasysong: "",
      songstimer: "",
      nextsong: "",
      //songsid: stores.songsheetid,
    });
    onMounted(() => {
      state.plasysong = getCurrentInstance().ctx.$refs;
      // console.log(state.plasysong);
      // console.log(state.plasysong.audio.duration);
    });

    //播放和暂停歌曲函数
    const plays = () => {
      if (stores.judgeplay) {
        state.plasysong.audio.play();
        stores.getjudgeplay(false);
        playtime();
      } else {
        state.plasysong.audio.pause();
        stores.getjudgeplay(true);
        clearInterval(state.songstimer);
      }
    };

    //定时把播放时间存入仓库
    function playtime() {
      state.songstimer = setInterval(() => {
        //console.log(state.plasysong.audio.currentTime);
        stores.switchplaybacktime(state.plasysong.audio.currentTime);
        //console.log("12354");
      }, 1000);
    }

    //监听歌曲是否播放完成，完成播放下一首
    // watch(
    //   () => stores.playbacktime,
    //   (a, b) => {
    //     clearTimeout(state.nextsong);
    //     state.nextsong = setTimeout(function () {
    //       playprevious();
    //     }, 3000);
    //   },
    //   { deep: true }
    // );

    // const methods = {
    //   plays: function () {
    //     console.log(1111);
    //     console.log(this.$refs);
    //     console.log(this.$refs.audio.pause);
    //     if (this.$refs.audio.pause) {
    //       this.$refs.audio.play();
    //       console.log(2222);
    //       stores.getjudgeplay(false);
    //     } else {
    //       this.$refs.audio.pause();
    //       console.log(3333);
    //       stores.getjudgeplay(true);
    //     }
    //   },
    // };

    //监听歌曲id变化播放歌曲
    watch(
      () => stores.songsheetid,
      (a, b) => {
        state.plasysong.audio.autoplay = true;
        stores.getjudgeplay(false);
        clearInterval(state.songstimer);
        playtime();
        // console.log(state.plasysong.audio.duration);
        // console.log(state.plasysong);
        //console.log(stores.songsheets, "9999999999999");
        //}
      },
      { deep: true }
    );

    const show = ref(false);
    //打开歌曲详细信息
    const showPopupopen = () => {
      getlrcs();
      show.value = true;
    };
    //关闭歌曲详细信息
    const showPopupshut = () => {
      show.value = false;
    };

    //歌词数据和播放时间
    function getlrcs() {
      getlyric(stores.songsheets[stores.songsindex].id).then((res) => {
        // console.log(res, "11111");
        // console.log(res.data.lrc.lyric);
        let arr = [];
        if (res.data.lrc) {
          res.data.lrc.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
            let min = item.slice(1, 3);
            let sec = item.slice(4, 6);
            let mill = item.slice(7, 10);
            let lyrc = item.slice(item.indexOf("]") + 1, item.length);
            // console.log(lyrc);
            let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
            arr[i] = {
              min: min,
              sec: sec,
              mill: mill,
              lyrc: lyrc,
              time: time,
              pre: 0,
            };
            if (i != 0) {
              arr[i - 1].pre = time;
            }
            //console.log(arr, "=123456=");
          });
          arr = arr.filter((item) => item.lyrc);
          stores.getly(arr);
          console.log(stores.lyrics, "=123456=");
        }
      });
    }

    //获取播放时间

    //播放下一首
    function playprevious() {
      stores.switchplaysong(stores.songsindex + 1);
      if (stores.songsindex == stores.songsheets.length) {
        stores.switchplaysong(0);
      }
      getlrcs();
      state.plasysong.audio.autoplay = true;
      //console.log(stores.songsindex);
    }
    //播放上一首
    function playnext() {
      stores.switchplaysong(stores.songsindex - 1);
      if (stores.songsindex == -1) {
        stores.switchplaysong(stores.songsheets.length - 1);
      }
      getlrcs();
      state.plasysong.audio.autoplay = true;
      //console.log(stores.songsindex);
    }

    return {
      // 您可以返回整个 store 实例以在模板中使用它
      stores,
      plays,
      state,
      show,
      showPopupopen,
      showPopupshut,
      getlrcs,
      playprevious,
      playnext,
      playtime,
    };
  },
  components: {
    SongLyric,
  },
  //   methods() {},
};
</script>

<style lang="less" scoped>
.footmusic {
  width: 100%;
  height: 1rem;
  position: fixed;
  bottom: 0;
  border-top: 1px solid gray;
  //text-align: center;
  .footmusic-songname {
    font-size: 0.1rem;
    font-weight: bold;
    text-align: left;
    // margin: 0.1rem 0;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: auto;
  }
  .footmusic-text {
    font-size: 0.01rem;
    height: 0.3rem;
    text-align: left;
    overflow: hidden;
    // margin: 0.1rem 0;
    white-space: nowrap;
  }
}

img {
  margin: 0.1rem 0.2rem 0 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  float: right;
}
</style>
